<template>
	<view class="container">
		<view v-if="isHistory" class="history-box">
			<view v-if="historyList.length > 0">
				<view class="history-title">
					<text>搜索历史</text>
					<text class="uni-icon uni-icon-trash" @click="clearSearch">删除</text>
				</view>
				<view class="history-content">
					<view class="history-item" v-for="(item, index) in historyList" :key="index" @click="listTap(item)">{{ item }}</view>
				</view>
			</view>
			<view v-else class="no-data">您还没有历史记录</view>
		</view>
		<view v-else>
			<view v-if="dataList.length > 0">
				<!-- 数据列表 -->
				<comiconList :dataList="dataList" v-if="historyName=='animeHistory'"></comiconList>
				<recruitList :listData="dataList" v-else-if="historyName=='recruitHistory'"></recruitList>
				<u-loadmore :status="status" :marginBottom="20" :marginTop="20" @loadmore="loadmore(value)" />
			</view>
			<view v-else class="no-data">没有搜索到结果，请重新搜索</view>
		</view>
	</view>
</template>

<script>
import comiconList from '@/components/comiconList/comiconList.vue';
import recruitList from "@/components/recruitList/recruitList.vue"
export default {
	data() {
		return {
			placeholder: '请输入关键词 如漫展',
			// 历史信息列表
			historyList: [],
			// 是否显示历史记录
			isHistory: true,
			// list: [1],
			// flng: true,
			// timer: null,
			// 当前页数
			page: 1,
			// 数据列表
			dataList: [],
			// 加载状态
			status: 'loadmore',
			// 页面状态相关
			// 历史记录储存名称
			historyName:'',
			// 当前应该请求的接口
			currentApiName:'',
			
		};
	},
	components: {
		comiconList,
		recruitList
	},
	watch: {
		historyList() {
			if (this.historyList.length > 20) {
				this.historyList = this.historyList.splice(this.historyList.length - 20, 20);
			}
		}
	},
	methods: {
		// 修改状态栏样式
		getTitleNView() {
			// 获取当前顶部状态栏
			// console.log("设置titlenview")
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			// 条件编译
			// #ifdef APP-PLUS
			let currentWebview = page.$getAppWebview();
			let titleObj = currentWebview.getStyle().titleNView;

			// 设置导航栏
			titleObj.paddingLeft = '10px';
			titleObj.paddingRight = '10px';
			titleObj.searchInput.placeholder = this.placeholder;

			// titleObj.buttons[0].text = titleObj.buttons[0].text === "\ue604" ? "\ue605" : "\ue604";
			currentWebview.setStyle({
				titleNView: titleObj
			});
			// #endif
		},
		/**
		 * 列表点击
		 */
		listTap(item) {
			console.log(item);
			// 获取当前顶部状态栏
			// console.log("设置titlenview")
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			// 条件编译
			// #ifdef APP-PLUS
			let currentWebview = page.$getAppWebview();
			currentWebview.setTitleNViewSearchInputText(item);
			// currentWebview.setTitleNViewSearchInputFocus({focus:true})
			let titleObj = currentWebview.getStyle().titleNView;

			// #endif
		},
		// 请求搜索数据

		// 此处请求为初始的第一页数据
		getSeachData(val) {
			this.page=1
			this.$request(this.currentApiName, { pageNum: this.page, value: val }, 'GET').then(res => {
				if (res.code == 2000 && res.data) {
					this.dataList = res.data;
					this.page++;
					console.log(this.page);
				} else {
					console.log(res);
					return;
				}
			});
		},
		// 手动选择加载更多
		loadmore(val) {
			// 设置加载动画的状态
			this.status = 'loading';
			this.$request('/comic-time/selectExhibition', { pageNum: this.page, value: val }, 'GET').then(res => {
				console.log(res);
				if (res.code == 2000 && res.data) {
					this.dataList.push(...res.data);
					this.status = 'loadmore';
					this.page++
					console.log(this.page);
				} else {
					this.status = 'nomore';
					return;
				}
			});
		},
		/**
		 * 清理历史搜索数据
		 */
		clearSearch() {
			uni.showModal({
				title: '提示',
				content: '是否清理全部搜索历史？该操作不可逆。',
				success: res => {
					this.historyList=[]
					uni.removeStorage({
						key:this.historyName
					})
				}
			});
		},
		// 设置页面状态
		setPageState(val){
			// 如果从首页跳转的状态
			if(val==="index"){
				this.historyName="animeHistory"
				this.currentApiName="/comic-time/selectExhibition"
			}else if(val==="zhomePage"){
				this.historyName="recruitHistory"
				this.currentApiName="/comic-time/selectRecruit"
			}else if(val==="contribute"){
				this.historyName="contributeHistory"
				this.currentApiName="/comic-time/selectExhibition"
			}
		}
		
	}, //方法结束位置

	// 底部加载
	onReachBottom() {
		this.loadmore();
	},
	/**
	 * 点击软键盘搜索按键触发
	 */
	onNavigationBarSearchInputConfirmed(e) {
		this.dataList=[]
		console.log(e.text);
		if (e.text == '') {
			uni.showModal({
				content: '请至少输入一个字符哦-.-'
			});
			return;
		}
		this.isHistory = false;
		this.value=e.text
		// console.log(this.historyList);
		this.getSeachData(e.text);
		if (
			!this.historyList.some(item => {
				return item == e.text;
			})
		) {
			this.historyList.push(e.text);
			uni.setStorage({
				data: this.historyList,
				key: this.historyName
			});
		}
	},
	// 搜索栏内容改变事件
	onNavigationBarSearchInputChanged(e) {
		// console.log(e.text.length)
		if (e.text.length == 0) {
			// console.log("ok")
			this.isHistory = true;
		}
		if (e.text.length > 10) {
			uni.showModal({
				content: '您输入的长度超过啦'
			});
		}
	},
	/**
	 *  点击导航栏 buttons 时触发
	 */
	onNavigationBarButtonTap() {
		uni.navigateBack({});
	},
	onLoad(event) {
		this.setPageState(event.source)
		const ctx = this;
		// 页面加载时获取搜索历史列表
		this.getTitleNView();
		uni.getStorage({
			key: this.historyName,
			complete(res) {
				console.log(res.data.length);
				if (res.data.length > 0) {
					ctx.historyList = res.data;
				}
				// else{
				// 	ctx.historyList=res.data
				// }
			}
		});
	}
};
</script>

<style lang="scss" scoped>
.container {
	// border-top: 2rpx solid #f0f3f8;
}
.history-title {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	padding-bottom: 0;
	font-size: 34rpx;
	color: #333;
}

.history-title .uni-icon {
	font-size: 40rpx;
}

.history-content {
	display: flex;
	flex-wrap: wrap;
	padding: 15rpx;
}

.history-item {
	padding: 4rpx 35rpx;
	border: 1px #f1f1f1 solid;
	background: #fff;
	border-radius: 50rpx;
	margin: 12rpx 10rpx;
	color: #999;
}

.history-list-box {
	/* margin: 10rpx 0; */
}

.history-list-item {
	padding: 30rpx 0;
	margin-left: 30rpx;
	border-bottom: 1px #eeeeee solid;
	font-size: 28rpx;
}

.no-data {
	text-align: center;
	color: #999;
	margin: 100rpx;
}

// 列表样式
.list_con {
	.list_item_con {
		position: relative;
		width: 100%;
		height: 320rpx;
		// outline: 1px solid red;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.img_con {
			width: 200rpx;
			height: 267rpx;
			background-color: #9b9b9b;
			overflow: hidden;
			border-radius: 8rpx;
			flex-shrink: 0;
			margin-right: 18rpx;
		}

		.text_con {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 267rpx;
			flex-grow: 1;

			.item_title_con {
				margin-bottom: 26rpx;

				.item_title {
					line-height: 33rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					/*显示行数*/
					overflow: hidden;
					font-family: 'PingFang SC Bold', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
			}

			.item_time,
			.item_location {
				line-height: 25rpx;
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #666666;
				margin-bottom: 19rpx;
			}

			.item_tag_con {
				box-sizing: border-box;
				width: 234rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.pay_tag,
				.sponsor_tag {
					box-sizing: border-box;
					line-height: 22rpx;
					padding: 7rpx 13rpx;
					border-radius: 6rpx;
					border: solid 1rpx #fead38;
					font-family: PingFangSC-Regular;
					font-size: 22rpx;
					color: #fead38;
				}

				.sponsor_tag {
					border-radius: 6rpx;
					border: solid 1rpx #fd6666;
					font-family: PingFangSC-Regular;
					font-size: 22rpx;
					color: #fd6666;
				}
			}

			.item_price_con {
				display: block;
				height: 28rpx;
				font-family: PingFangSC-Semibold;
				line-height: 33rpx;
				font-size: 36rpx;
				color: #fd6666;

				.symbol {
					font-size: 24rpx;
					color: #fd6666;
				}
			}
		}

		&::before {
			position: absolute;
			left: 0;
			bottom: -1rpx;
			content: '';
			width: 100%;
			height: 2rpx;
			background-color: #f0f3f8;
		}
	}
}
</style>
